<template>
  <el-table
    :data="data"
    :height="$attrs.height"
    :stripe="$attrs.stripe"
    @selection-change="handleSelectionChange"
    @sort-change="sortChange"
    v-loading="loading"
    ref="refMyTable"
    v-bind="$attrs"
    @select="handleSelectChange"
    @select-all="handleSelectAllChange"


  >
    <template v-for="(item, index) in columnData">
      <tableColumn :key="index" v-if="!item.hideColumn" :data="item" />
    </template>
    <slot></slot>
  </el-table>
</template>

<script>
import tableColumn from "./table-column";
export default {
  name: "myTable",
  props: {
    data: {
      require: true,
      type: Array,
    },
    columnData: {
      type: Array,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    tableColumn,
  },
  methods: {
    handleSelectionChange(val) {

      // let value = val.filter(el =>
      //   el.applyStatus === 'TODO'
      // )
      this.$emit("handle-selectionChange", val);
    },
    sortChange(column, prop, order) {
      this.$emit("sort-change", column, prop, order);
    },
    handleSelectChange(selection, row) {
      this.$emit("select", selection, row);
    },
    handleSelectAllChange(val) {
      this.$emit("select-all", val);
    },
    handleToggleRowSelection(row) {
      this.$refs.refMyTable.toggleRowSelection(row);
    },
    handleClearSelection() {
      this.$refs.refMyTable.clearSelection();
    },
  },
};
</script>
